<script type="text/javascript" src="js/numberformatter/jshashtable-2.1.js"></script>
<script type="text/javascript" src="js/numberformatter/jquery.numberformatter-1.2.3.min.js"></script>
<style>
    .ui-widget-content .ui-state-default {
        background: #ff0000;
    }

    #slider, #slider2, #slider3 {
        background: #ffffff;
    }

    .error {
        color: red;
        font-weight: bold;
    }
</style>
<div class="container_16">
    <div class="grid_12 push_2 containerHeight">
        <form id="simulador" name="simulador" action="backend/hipoteca/hipoteca/amortizacion" method="post">
            <h2><?=lang('calcHip'); ?></h2>
            <table>
                <tr>
                    <td><label for="capital"><?=lang('capital'); ?></label></td>
                    <td><input size="7" class="eurr" type="text" id="capital" value="300.000"
                               name="capital"/><span>€</span></td>
                    <td>
                        <!--- onkeyup="$('#capital').change();"--->
                        <div style="width: 300px;" id="slider"></div>
                    </td>
                    <td><label id="errorCapital" style="display: none;"><?=lang("errorCapital")?></label></td>
                </tr>
                <tr>
                    <td><label for="interes"><?=lang('interes'); ?></label></td>
                    <td><input size="7" type="text" id="interes" value="5,5" name="interes"/><span>%</span></td>
                    <td>
                        <div style="width: 300px;" id="slider2"></div>
                    </td>
                    <td><label id="errorInteres" style="display: none"><?=lang("errorInteres")?></label></td>
                </tr>
                <tr>
                    <td><label for="plazo"><?=lang('plazo');  ?>&nbsp;&nbsp;</label></td>
                    <td>
                        <input type="text" id="plazoAno" name="plazoAno" value="12"
                               size="1"/><span> <?=lang('anos'); ?></span>
                        <input type="text" id="plazoMes" name="plazoMes" value="6"
                               size="1"/><span> <?=lang('meses'); ?></span>
                    </td>
                    <td>
                        <div style="width: 300px;" id="slider3"></div>
                    </td>
                    <td><label id="errorAno" style="display: none;"><?=lang("errorAnos")?><br></label><label
                        id="errorMeses" style="display: none;"><?=lang("errorMeses")?></label></td>
                </tr>
                <tr>
                    <td><label for="cuota"><?=lang('cuota'); ?></label></td>
                    <td><input class="eurr" type="text" id="cuota" size="7" readonly="readonly" name="cuota"
                               value="2.770,07"/><span>€</span></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <button type="button" id="amorti"><?=lang('cuadrAmort'); ?></button>
                    </td>
                    <td><label id="errorOculto" style="display: none"><?= lang('faltandatos') ?></label></td>
                </tr>
            </table>

        </form>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        /*CAPITAL*/
        $("#capital").live("keyup", function () {
            /*if(isNan(parseFloat($("#capital").val()))) {
                alert("as");
                alert("error capital NaN");
            } else {
                var capital = parseFloat($("#capital").val());
                if(capital > 0 && capital < 600000) {
                    $("#slider").slider("option", "value", parseInt(($("#capital").val()).replace(".", "")));
                } else {
                    alert("error cantidad capital");
                }
            }*/
        });
        $("#capital").live("click",
            function () {
                $(this).val("");
            });
        $("#capital").change(function () {
            quitError();
            $(this).formatNumber({format:"#,###.##", locale:"es"});
            if ($(this).val() == 0) {
                $(this).val("");
                $(this).focus();
                $("#errorCapital").attr("style", "color:red");
            }
        });
        /*CUOTA*/
        $("#cuota").change(function () {
            quitError();
            $(this).formatNumber({format:"#,###.##", locale:"es"});
        });

        /*INTERES*/
        $("#interes").live("keyup", function () {
            if (parseFloat($("#interes").val()) <= 10 && parseFloat($("#interes").val()) >= 0) {
                $("#errorInteres").attr("style", "display:none");
                $("#slider2").slider("option", "value", parseFloat(($("#interes").val()).replace(",", ".")));
            } else {
                $("#interes").val("5,5");
                $("#slider2").slider("option", "value", parseFloat(($("#interes").val()).replace(",", ".")));
                $("#errorInteres").attr("style", "color:red");
            }
        });
        $("#interes").change(function () {
            $("#errorInteres").attr("style", "display:none;");
            $(this).formatNumber({format:"##.##", locale:"es"});
        });
        /*PLAZOS AÑO*/
        $("#plazoAno").live("keyup", function () {
            if (isNaN($("#plazoAno").val())) {
                $("#errorAno").attr("style", "color:red");
                $("#plazoAno").val("0");
                $("#plazoAno").focus();
            } else {
                $("#errorAno").attr("style", "display:none");
            }
        });
        /*PLAZOS MES*/
        $("#plazoMes").live("change", function () {
            var meses = parseInt($("#plazoMes").val());
            if (isNaN(meses)) {
                $("#errorMeses").attr("style", "color:red");
            } else {
                var anos = parseInt($("#plazoAno").val());
                if (isNaN(anos)) {
                    $("#errorAno").attr("style", "color:red");
                } else {
                    var incrementoAnos = parseInt(meses / 12);
                    anos = anos + incrementoAnos;
                    meses = meses - (incrementoAnos * 12);
                    $("#plazoAno").val(anos);
                    $("#plazoMes").val(meses);
                    $("#errorAno").attr("style", "display:none");
                    $("#errorMeses").attr("style", "display:none");
                }
            }
        });

        $("#amorti").click(function () {
            var capital = $("#capital").val();
            var interes = $("#interes").val();
            var plazos = $("#plazoMes").val();
            var cuota = $("#cuota").val();
            if (capital !== "" && interes !== "" && plazos !== "" && cuota !== "") {
                $("#simulador").submit();
            } else {
                $("#errorOculto").attr("style", "color:red");
            }
        });

        $("#slider").slider({
            value:300000,
            step:100,
            min:1000,
            max:600000,
            slide:function (event, ui) {
                $("#capital").val(ui.value);
                $("#capital").change();
                reset();
            }
        });
        $("#slider2").slider({
            value:5.5,
            step:0.5,
            min:1,
            max:10,
            slide:function (event, ui) {
                $("#interes").val(ui.value);
                $("#interes").change();
                reset();
            }
        });

        $("#slider3").slider({
            value:150,
            step:1,
            min:1,
            max:300,
            slide:function (event, ui) {
                $("#errorAno").attr("style", "display:none;");
                $("#errorMeses").attr("style", "display:none;");
                $("#plazoMes").val(ui.value);
                var meses = parseInt($("#plazoMes").val());
                if (isNaN(meses)) {
                    alert("error Meses");
                } else {
                    var anos = 0;
                    if (isNaN(anos)) {
                        alert("error Años");
                    } else {
                        var incrementoAnos = parseInt(meses / 12);
                        anos = anos + incrementoAnos;
                        meses = meses - (incrementoAnos * 12);
                        $("#plazoAno").val(anos);
                        $("#plazoMes").val(meses);
                    }
                }
                recalculateCuota();
            }
        });


        function quitError() {
            $("#errorOculto").attr("style", "display:none;");
            $("#errorCapital").attr("style", "display:none;");
        }


        function recalculateCuota() {
            if ($("#capital").val() !== "" && $("#interes").val() !== "" && $("#plazoMes").val() !== "" && $("#plazoAno").val() !== "") {
                var capital = parseFloat(($("#capital").val()).replace(".", ""));
                var interes = parseFloat(($("#interes").val().replace(",", ".")) / 100);
                var plazos = parseInt($("#plazoAno").val() * 12);
                plazos = plazos + parseInt($("#plazoMes").val());


                var cuota_part = Math.pow((1 + (interes / 12)), (plazos));
                var cuota = (capital * (interes / 12) * cuota_part) / (cuota_part - 1);
                ///cuota = Math.round(cuota * 1000) / 1000;

                $("#cuota").val(cuota);
                $("#cuota").change();
            } else {
                $("#cuota").val("");
            }

        }

        function reset() {
            $("#cuota").val("");
            $("#plazoMes").val("");
            $("#plazoAno").val("");
        }
    });
</script>